<template>
    <div class="invitation_self">
        <div class="invitation_self_header">{{ $t('my.邀请好友加入聊天') }}</div>
        <!-- <div class="invitation_self_desc">{{ $t('my.成功邀请好友可获得5元现金奖励') }}</div> -->
        <div class="invitation_self_show_view">
            <img :src="user.avatar" alt="" class="invitation_self_avatar">
            <div class="invitation_self_name">{{ user.nickname }}</div>
            <div class="invitation_self_tips">{{ $t('my.邀请你注册扫码一起聊天') }}</div>
            <img :src="user.uniquecode_image" alt="" class="invitation_self_qrcode">
            <div class="invitation_self_qrtext">
                <span class="key">{{ $t('my.邀请码') }}</span>
                <span class="value">{{ user.uniquecode }}</span>
            </div>
        </div>
        <div class="invitation_self_footer">
            <!-- <el-button type="primary" plain>{{ $t('my.保存图片') }}</el-button> -->
            <el-button type="primary" @click="inviteNow">{{ $t('my.立即邀请') }}</el-button>
        </div>
        <div class="invitation_footer_tips">
            <div>{{ $t('my.已邀请') }}<span>{{ invitedCount }}{{ $t('my.人') }}</span></div>
            <!-- <div>{{ $t('my.累积获得') }}<span>{{ totalReward }}</span>{{ $t('my.元奖励') }}</div> -->
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            user: {},
            invitedCount: 0,
            totalReward: 0,
        }
    },
    async created() {
        let { userinfo } = await this.$api.usersApi.userIndex();
        this.user = userinfo;

        this.invitedCount = userinfo.invite_num;
        this.totalReward = userinfo.reward_amount;
    },
    methods: {
        inviteNow() {
            const el = document.createElement('textarea');
            el.value = this.user.uniquecode_url;
            el.setAttribute('readonly', '');
            el.style.position = 'absolute';
            el.style.left = '-9999px';
            document.body.appendChild(el);
            el.select();
            document.execCommand('copy');
            document.body.removeChild(el);
            this.$message({
                message: this.$t('my.链接已复制'),
                type: 'success'
            });
        }
    }
}
</script>
<style lang="scss" scoped>
.invitation_self {
    padding-top: 45px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;

    &_header {
        font-weight: bold;
        font-size: 24px;
        color: #333333;
        padding: 8px 0 90px;
        box-sizing: border-box;
    }

    &_desc {
        font-weight: bold;
        font-size: 14px;
        color: #333333;
        padding: 8px 0 90px;
        box-sizing: border-box;
    }

    &_show_view {
        width: 400px;
        padding-top: 80px;
        padding-bottom: 24px;
        background: #FFFFFF;
        border-radius: 20px 20px 20px 20px;
        border: 1px solid #EAEAEA;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }

    &_avatar {
        width: 126px;
        height: 126px;
        border-radius: 50%;
        position: absolute;
        left: 50%;
        top: -54px;
        z-index: 2;
        transform: translateX(-50%);
    }

    &_name {
        font-weight: bold;
        font-size: 20px;
        color: #333333;
    }

    &_tips {
        font-size: 14px;
        color: #7F7F7F;
        margin-top: 8px;
    }

    &_qrcode {
        width: 135px;
        height: 135px;
        border-radius: 10px 10px 10px 10px;
        margin: 32px 0;
    }

    &_qrtext {
        width: 151px;
        height: 74px;
        border-radius: 12px 12px 12px 12px;
        border: 1px solid #9A9A9A;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .key {
            height: 20px;
            line-height: 20px;
            font-size: 14px;
            color: #7F7F7F;
        }

        .value {
            height: 34px;
            line-height: 34px;
            font-weight: bold;
            font-size: 24px;
            color: #333333;
        }
    }
}

.invitation_self_footer {
    margin-top: 32px;
    display: flex;
    justify-content: center;

    .el-button {
        width: 118px;
        height: 32px;
    }
}

.invitation_footer_tips {
    text-align: center;
    font-size: 14px;
    color: #7F7F7F;
    padding-top: 40px;
    box-sizing: border-box;

    span {
        color: #2273FF;
    }
}
</style>